// 默认背景色
const bgColor = "#000000";
// 像素点颗粒度
const gap = 6;

const c = document.createElement("canvas");
const { innerWidth: ww, innerHeight: wh } = window;
c.width = ww;
c.height = wh;
document.body.appendChild(c);

const ctx = c.getContext("2d");

const image = new Image();
image.src = "./res/http.png";

image.onload = onImgLoad;

const points: number[][] = [];

function onImgLoad() {
  const w = image.width,
    h = image.height;
  ctx && ctx.drawImage(image, 0, 0, w, h);
  const imgData = ctx?.getImageData(0, 0, w, h).data;
  if (imgData) {
    for (let i = 0; i < h; i += gap) {
      for (let j = 0; j < w; j += gap) {
        let position = (w * i + j) * 4;
        let r = imgData[position],
          g = imgData[position + 1],
          b = imgData[position + 2];
        if (r + g + b !== 0) {
          points.push([j, i]);
        }
      }
    }
  }
  c.addEventListener("click", onStartDraw);
}

function onStartDraw(e: MouseEvent) {
  const { clientX, clientY } = e;
  const w = image.width,
    h = image.height,
    sx = clientX - w / 2,
    sy = clientY - h / 2;
}
